<template>
	<div class="page-my-info">
		<el-form
			ref="form"
			size="small"
			label-width="100px"
			:model="form"
			:rules="rules"
			:disabled="saving"
		>
			<el-form-item label="头像">
				<cl-upload v-model="form.user_photo" />
			</el-form-item>
			<el-form-item label="姓名" prop="user_name">
				<el-input v-model="form.user_name" placeholder="请填写姓名" />
			</el-form-item>
			<el-form-item label="性别" prop="user_sex">
				<cl-select v-model="form.user_sex" placeholder="请选择性别" style="width:100%">
					<el-option label="男" :value="1" />
					<el-option label="女" :value="2" />
				</cl-select>
			</el-form-item>
			<el-form-item label="手机号码" prop="mobile">
				<el-input placeholder="请填写手机号码" v-model.trim="form.mobile" maxlength="11" />
			</el-form-item>

			<el-form-item label="员工微信" prop="user_wx">
				<el-input v-model.trim="form.user_wx" placeholder="请填写员工微信" maxlength="30" />
			</el-form-item>
			<el-form-item label="身份证" prop="user_idcard">
				<el-input v-model="form.user_idcard" placeholder="请填写身份证" />
			</el-form-item>
			<el-form-item label="现居地" prop="user_addr">
				<el-input v-model="form.user_addr" placeholder="请填写现居地" />
			</el-form-item>
			<el-form-item label="员工工号" prop="user_sn">
				<el-input v-model="form.user_sn" placeholder="未填写" disabled />
			</el-form-item>
			<el-form-item label="员工职位" prop="ro_name">
				<el-input v-model="form.ro_name" placeholder="未填写" disabled />
			</el-form-item>
			<el-form-item label="所属部门" prop="user_dept">
				<el-input v-model="form.user_dept" placeholder="未填写" disabled />
			</el-form-item>
			<el-form-item label="技师级别" prop="user_level">
				<el-input v-model="form.user_level" placeholder="未填写" disabled />
			</el-form-item>
			<el-form-item class="pt-1">
				<el-button
					type="primary"
					size="small"
					style="width:120px"
					@click="submit"
					:loading="saving"
				>
					保存修改
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { mapGetters } from "vuex";
import { validate } from "@/utils/validate";
import routeLeave from "@/mixins/route-leave";
import defaultAvatar from "@/assets/img/men.png";

export default {
	name: "PersonalCenter",
	mixins: [routeLeave],
	data() {
		return {
			allowLeave: true,
			form: {
				user_id: "",
				mobile: "",
				user_name: "",
				user_photo: "",
				user_sex: 1,
				user_wx: "",
				user_sn: "",
				user_idcard: "",
				user_addr: "",
				user_title: "",
				user_dept: "",
				user_level: "",
				ro_name: ""
			},
			rules: {
				user_name: [{ required: true, message: "请输入姓名" }],
				mobile: [
					{ required: true, message: "请输入手机号码" },
					{ pattern: validate.mobile, message: "手机号码格式不正确" }
				],
				user_wx: [
					{ min: 6, max: 30, message: "微信号6-30个字数" },
					{ pattern: validate.wechat, message: "员工微信格式不正确" }
				],
				user_idcard: [{ pattern: validate.idcard, message: "身份证格式不正确" }]
			},
			saving: false,
			edit: false
		};
	},

	computed: {
		...mapGetters(["userInfo"])
	},
	watch: {
		form: {
			immediate: true,
			deep: true,
			handler(v) {
				this.allowLeave = false;
			}
		}
	},
	mounted() {
		const { info = {}, ...user } = this.userInfo;
		this.form = {
			user_id: user.user_id,
			mobile: user.mobile,
			user_name: user.user_name,
			user_photo: info.user_photo,
			user_sex: info.user_sex ?? 1,
			user_wx: info.user_wx,
			user_sn: info.user_sn,
			user_idcard: info.user_idcard,
			user_addr: info.user_addr,
			user_title: info.user_title,
			user_dept: user.dept_name,
			user_level: info.user_level,
			ro_name: info.ro_name
		};
		if (!this.form.user_photo) {
			this.form.user_photo = defaultAvatar;
		}
		this.$nextTick(() => {
			this.allowLeave = true;
		});
	},
	methods: {
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				await this.$service.user.easyEdit(this.form).done(() => {
					this.saving = false;
				});
				this.$message.closeAll("修改成功");
				this.$message.success("修改成功");
				const { info = {}, ...user } = this.userInfo;
				this.allowLeave = true;
				this.$store.dispatch("userInfo", {
					...user,
					info: {
						...info,
						...this.form
					}
				});
			});
		}
	}
};
</script>

<style lang="scss">
.page-my-info {
	background-color: #fff;
	height: 100%;
	overflow: auto;
	padding: 20px;
	box-sizing: border-box;

	.el-form {
		width: 400px;
		max-width: 100%;
	}

	.title {
		color: #000;
		margin-bottom: 30px;
		font-size: 15px;
	}
}
</style>
